<template>

	<div class="movenav add" style="border-bottom:none;">
		<div class="nav">
			<div class="header-content">
				<div class="logo">
					<a class="logo-a" href=""><img :src="picture.logo" /></a>
				</div>
				<div class="search-box">
					<div class="fixed-search">
						<input class="search-input" type="text" name="" id="" value="" placeholder="请输入标题、关键字、编号搜索" />
						<a href="" class="searchbtn">
							<span class="searchbtn-img"></span>
						</a>
					</div>

				</div>

			</div>
		</div>

	</div>

</template>

<script>
import $ from 'jquery'
	
	export default {
		props: {
			picture: {
				type: Object
			}
		}
	}
	 $(document).ready(function() {  
            var navOffset=$(".movenav").offset().top;  
            
            console.log(navOffset)
            $(window).scroll(function(){  
                var scrollPos=$(window).scrollTop();  
                console.log(scrollPos)
                if(scrollPos >=navOffset){  
                    $(".movenav").addClass("movenav");  
                }else{  
                    $(".movenav").removeClass("movenav");  
                }  
            });  
 
        }); 
</script>

<style lang="less" rel="stylesheet/less">
	.movenav {
		position: fixed;
		height: 182px;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 10000;
		display: block;
		.nav {
			width: 100%;
			height: 62px;
			background: white;
			.header-content {
				padding-top: 10px;
				width: 1200px;
				height: 62px;
				margin: 0 auto;
				.logo {
					width: 325px;
					height: 36px;
					float: left;
					margin: 7px 125px 0 5px;
				}
				.search-box {
					flex: 3;
					float: right;
					width: 740px;
					height: 62px;
					.fixed-search {
						width: 536px;
						height: 40px;
						margin-bottom: 5px;
						.searchbtn {
							float: right;
							width: 76px;
							height: 40px;
							background: rgb(0, 175, 109);
							margin-right: 9.78px;
							.searchbtn-img {
								display: block;
								background-image: url(header.png);
								background-repeat: no-repeat;
								background-position: -16px 0;
								width: 25px;
								height: 27px;
								margin: 10px auto;
							}
						}
						.search-input {
							box-sizing: border-box;
							width: 450.233px;
							height: 40px;
							border: 2px solid rgb(0, 175, 109);
							padding: 0 10px;
							outline: none;
							color: rgb(178, 178, 178);
						}
					}
				}
			}
		}
	}
	
</style>